<template>
  <div class="edit-box">
  <el-form label-width="120px" class="form-grid" :model="formData">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="申请ID"><el-input v-model="formData.id" readonly /></el-form-item>
        <el-form-item label="会员账号"><el-input v-model="formData.phone_number" readonly /></el-form-item>
        <el-form-item label="姓名"><el-input v-model="formData.real_name" readonly /></el-form-item>
        <el-form-item label="电话"><el-input v-model="formData.tel" readonly /></el-form-item>
        <el-form-item label="身份证号"><el-input v-model="formData.id_card_number" readonly /></el-form-item>
        <el-form-item label="姓别">
        <el-tag
          :type="SEX[String(formData.sex)] && SEX[String(formData.sex)].type"
          disable-transitions
        >
          <i
            :class="SEX[String(formData.sex)] && SEX[String(formData.sex)].icon"
            style="margin-right: 4px"
          />
          {{ SEX[String(formData.sex)] ? SEX[String(formData.sex)].text : '未知' }}
        </el-tag>
        </el-form-item>
        <el-form-item label="详细地址"><el-input v-model="formData.address" readonly /></el-form-item>
        <el-form-item label="所在区域">
          <el-input :value="`${formData.province || ''} ${formData.city || ''} ${formData.area || ''}`" readonly />
        </el-form-item>
       <!-- <el-form-item label="所在街道"><el-input v-model="formData.t_title" readonly /></el-form-item>
        <el-form-item label="所在小区"><el-input v-model="formData.y_name" readonly /></el-form-item> -->
      </el-col>

      <el-col :span="12">
        <el-form-item label="身份证正面"><el-image :src="$imageFull(formData.card_face)" style="height: 80px" /></el-form-item>
        <el-form-item label="身份证国徽"><el-image :src="$imageFull(formData.card_bg)" style=" height: 80px" /></el-form-item>

        <el-form-item label="申请时间"><el-input v-model="formData.create_time" readonly /></el-form-item>
        <el-form-item label="审批时间"><el-input v-model="formData.approved_time" readonly /></el-form-item>
        <el-form-item label="审核状态">
          <el-tag
            :type="APPROVAL_STATUS[String(formData.approved_status)] && APPROVAL_STATUS[String(formData.approved_status)].type"
            disable-transitions
          >
            <i
              :class="APPROVAL_STATUS[String(formData.approved_status)] && APPROVAL_STATUS[String(formData.approved_status)].icon"
              style="margin-right: 4px"
            />
            {{ APPROVAL_STATUS[String(formData.approved_status)] ? APPROVAL_STATUS[String(formData.approved_status)].text : '未知状态' }}
          </el-tag>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="审批备注" class="full-width">
      <el-input type="textarea" v-model="formData.approved_reason" :rows="3" placeholder="请输入审批备注..." />
    </el-form-item>

    <el-form-item class="btn-group">
      <el-button type="success" @click="$emit('approve', { id: formData.id, action: 1, remark: formData.approved_reason })">审批通过</el-button>
      <el-button type="danger" @click="$emit('approve', { id: formData.id, action: 2, remark: formData.approved_reason })">拒绝</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>

<script>
  import {
    APPROVAL_STATUS,SEX
  } from '@/constants/statusMap';
export default {
  name: "ReviewDetail",
  props: {
    formData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      APPROVAL_STATUS,
      SEX,
      remark: ""
    };
  }
};
</script>

<style scoped>
  .edit-box{
    box-sizing: border-box;
    padding: 10px 40px 20px 10px;
  }
.form-grid .el-form-item {
  margin-bottom: 20px;
}
.full-width{
  margin-top: 20px;
}
.full-width .el-input {

  width: 100%;
}
.btn-group {
  text-align: center;
}
</style>
